<template>
  <div>
    <el-row>
      <el-col :span="2">
        <div style="text-align: left">
          <span>选择供应商</span>
        </div>
      </el-col>
      <el-col :span="6">
        <el-select
          v-model="formData.foreignKeyId"
          :disabled="readOnlyInfo"
          filterable
          placeholder="请选择"
        >
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.supplierName"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-col>
      <el-col v-if="!readOnlyInfo" :span="2">
        <el-button type="primary" @click="confirm">确定</el-button>
      </el-col>
    </el-row>
    <el-row v-if="readOnlyInfo">
      <el-col :span="24">
        <el-table
          ref="evaluationTable"
          :data="evaluationTable"
          fit
          highlight-current-row
        >
          <el-table-column label="评定单编号" prop="num" />
          <el-table-column label="创建人" prop="createorName" />
          <el-table-column label="创建时间" prop="createTime">
            <template slot-scope="scope">
              <span>{{ formatTime(scope.row.createTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="状态" prop="state">
            <template slot-scope="scope">
              <span>{{ Status[scope.row.state] }}</span>
            </template>
          </el-table-column>
          <el-table-column label="通过时间" prop="passTime">
            <template slot-scope="scope">
              <span>{{ formatTime(scope.row.passTime) }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-table
          ref="multipleTable"
          :data="multipleTable"
          fit
          highlight-current-row
        >
          <el-table-column label="供应商名称" prop="supplierName" />
          <el-table-column label="供应产品" prop="supplyProduct" />
          <el-table-column label="联系人" prop="contact" />
          <el-table-column label="联系电话" prop="phone" />
          <el-table-column label="联系地址" prop="address" />
        </el-table>
      </el-col>
    </el-row>
    <div style="text-align: left">
      <span>评定项目</span>
    </div>
    <el-row>
      <el-col :span="24">
        <el-table
          :data="formData.detectionList"
          element-loading-text="Loading"
          fit
          border
          style="width: 100%"
        >
          <el-table-column label="项目类型" width="200px">
            <template slot-scope="scope">
              {{ scope.row.itemType + "(" + scope.row.scoreLine + ")" }}
            </template>
          </el-table-column>
          <el-table-column label="评分标准">
            <template slot-scope="scope">
              <div>
                <el-row
                  v-for="item in scope.row.evaluationStandardList"
                  :key="item.id"
                >
                  <el-col>
                    <el-checkbox
                      v-model="item.checked"
                      :disabled="readOnlyInfo"
                      :true-label="1"
                      :false-label="0"
                      >{{ item.sort + "、" + item.content }}</el-checkbox
                    >
                  </el-col>
                </el-row>
                <el-row v-if="scope.row.remark">
                  <el-col>
                    <span> 备注：{{ scope.row.remark }} </span>
                  </el-col>
                </el-row>
              </div>
            </template>
          </el-table-column>
          <el-table-column width="150px">
            <template #header>
              <span style="color: red">*</span>
              <span>得分</span>
            </template>
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.score"
                :disabled="readOnlyInfo"
                autocomplete="off"
                @input="handleInput(scope.row)"
              ></el-input>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <el-table
          :data="formData.list"
          element-loading-text="Loading"
          fit
          border
          style="width: 100%"
        >
          <el-table-column label="累计得分" prop="score" width="100px" />
          <el-table-column prop="opinion" width="200px">
            <template #header>
              <span style="color: red">*</span>
              <span>评价意见</span>
            </template>
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.opinion"
                :disabled="readOnlyInfo"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in OpinionList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="背景材料">
            <template slot-scope="scope">
              <el-row>
                <el-col
                  v-for="item in scope.row.materilaData"
                  :key="item.value"
                  :span="8"
                >
                  <el-checkbox
                    v-model="item.checked"
                    :disabled="readOnlyInfo"
                    :true-label="1"
                    :false-label="0"
                    >{{ item.content }}</el-checkbox
                  >
                </el-col>
              </el-row>
            </template>
          </el-table-column>
          <el-table-column label="备注" prop="remark" width="300px">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.remark"
                type="textarea"
                :disabled="readOnlyInfo"
              ></el-input>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { formatTime } from "@/utils/time";
import { Get } from "@/ModuleEvaluation/api/Evaluation/Evaluation.js";
import { getListNoPage } from "@/ModuleEvaluation/api/Supplier/Supplier.js";
import {
  EvaluationVerifyReject,
  EvaluationVerifyPass,
} from "@/ModuleEvaluation/api/Evaluation/Evaluation";
export default {
  name: "AuditSupplierEvaluationDialog",
  components: {},
  props: {
    editId: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      loading: true,
      readOnlyInfo: true,
      formatTime,
      Status: {
        10: "待提交",
        20: "审核中",
        30: "已通过",
        40: "已驳回",
        50: "已作废",
        70: "已作废",
      },
      OpinionList: [
        {
          value: 1,
          label: "合格",
        },
        {
          value: 2,
          label: "不合格",
        },
      ],
      multipleTable: [],
      options: [],
      materialData: [],
      evaluationTable: [],
      formData: {
        id: 0,
        type: 10,
        num: "",
        creatorId: 0,
        createTime: null,
        foreignKeyId: "",
        detectionList: [],
        list: [
          {
            score: 0,
            materilaData: [],
          },
        ],
        materilaData: [],
        score: 0,
        remark: "",
        opinion: 0,
        state: 0,
      },
    };
  },
  watch: {},
  created() {
getListNoPage().then((res) => {
      this.options = res.data;
      this.init();
    });
  },
  methods: {
    init() {
     Get({ id: this.editId })
        .then((res) => {
          this.evaluationTable = [
            {
              num: res.data.num,
              createTime: res.data.createTime,
              state: res.data.state,
              passTime: res.data.passTime,
              createorName: res.data.createorName,
            },
          ];
          this.formData = res.data;
          this.formData.list = [
            {
              opinion: this.formData.opinion,
              score: this.formData.score,
              remark: this.formData.remark,
              materilaData: this.formData.sysBusinessEvaluationMaterials,
            },
          ];
          this.confirm();
        });
    },
    confirm() {
      var data = this.options.find((x) => x.id === this.formData.foreignKeyId);
      this.multipleTable = [];
      this.multipleTable.push(data);
    },
    innerPass(obj) {
      EvaluationVerifyPass(obj)
        .then((res) => {
          this.$emit("passOrNoPassEmit");
        })
        .catch();

      // DeviceManage.Api["DeviceChange"]
      //   .verifyPass(obj)
      //   .then((res) => {
      //     this.$emit("passOrNoPassEmit");
      //   })
      //   .catch();
    },
    innerReject(obj) {
      EvaluationVerifyReject(obj)
        .then((res) => {
          this.$emit("passOrNoPassEmit");
        })
        .catch();

      // DeviceManage.Api["DeviceChange"]
      //   .verifyReject(obj)
      //   .then((res) => {
      //     this.$emit("passOrNoPassEmit");
      //   })
      //   .catch();
    },
    innerWithdraw(obj) {
      obj.auditStatus = 60;

     EvaluationVerifyReject(obj)
        .then((res) => {
          this.$emit("passOrNoPassEmit");
        })
        .catch();

      // DeviceManage.Api["DeviceChange"]
      //   .verifyReject(obj)
      //   .then((res) => {
      //     this.$emit("passOrNoPassEmit");
      //   })
      //   .catch();
    },
  },
};
</script>
<style scoped>
</style>
